<!--终端-->
<template>
    <div class="current-page">
        <div class="titleList">
            <el-row>
                <el-col :span="4" :offset="20"><el-button type="primary" @click="increase">增加</el-button>
                <el-button type="primary" @click="addDelet" style="margin-left:20px;">删除</el-button>
                <el-button type="primary" style="margin-left:20px;" >生效</el-button></el-col>
            </el-row>
            <div class="btn-right">
            </div>
        </div>
        <com-table ref="comTable" :tableData="tableData" url="system/log/local"  keyName="XPRO_ARRAY" :has-data="hasData"
                :table-head-list="tableHeadList" :total-count="totalCount" :page-num="pageNum" :searchForm ="searchForm"
        :page-size="pageSize" :page-sizes="pageSizes" :table-loading="loading" :table-height="tableHeight" :is-show-select="true"
        :page-show="true" :handle-show="false" :merge-flag="false"  @setSearchHeight="setSearchHeight" >
        </com-table>
         <el-dialog
      title="添加"
      :visible="showAuditDialog"
      @close="showAuditDialog = false"
      custom-class="alarm-type-detail el-dialog-widthSmall"
      :close-on-click-modal="false"
      @closed="auditDialogClosed"
      v-dialogDrag
    >
      <div class="dengshus">
        <el-form label-width="80px" :model="formInline">
          <div class="awas">
            <el-form-item label="类型">
             <el-select v-model="formInline.value" placeholder="请选择" style="width:100%;">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            </el-form-item>
          </div>
          <div class="awas">
            <el-form-item label="名称">
              <el-input
                v-model="formInline.KeyType"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
          </div>
            <div class="awas">
            <el-form-item label="IP地址">
              <el-input
                v-model="formInline.ip"
                placeholder="请输入ip地址"
              ></el-input>
            </el-form-item>
          </div>
          <div class="awas">
            <el-form-item label="端口号">
              <el-input
                v-model="formInline.port"
                placeholder="请输入端口号"
              ></el-input>
            </el-form-item>
          </div>
          <div class="awas">
            <el-form-item label="备注">
              <el-input
                v-model="formInline.remarks"
                placeholder="请输入端备注"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAuditDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmInfo">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>
<script>
  import ComTable from "../../components/table/comTable";
  export default {
    name: 'systemLog',
    data() {
      return {
        formInline:{

        },
         options: [{
          value: '选项1',
          label: '告警地址'
        }, {
          value: '选项2',
          label: '探测地址'
        }],
        showAuditDialog:false,
        pageSizes: [5, 10, 20, 50, 100],
        tableHeadList:[],
        formColumns:[],
        pageNum: 1,
        pageSize: 10,
        totalCount: 0,
        hasData:false,
        tableData: [], // 表格数据
        tableHeight: '', // 表格高度
        loading: false, // 数据加载状态遮罩
        tableDataSelected: [],
        searchForm: {
          name:[]
        },
        startTime:'',
        endTime:''
      };
    },
    components:{
      ComTable,
    },
    created(){
      this.setTableHeight();
      this.tableHeadList = [
        {colDisabled: false, colHidden: true, colSearch: true, colSort: false, columnComment: "类型", columnName: "id"},
        {colDisabled: false, colHidden: false, colSearch: true, colSort: false, columnComment: "地址名称", columnName: "name"},
        {colDisabled: false, colHidden: false, colSearch: true, colSort: false, columnComment: "IP地址", columnName: "ip"},
        {colDisabled: false, colHidden: false, colSearch: true, colSort: false, columnComment: "端口号", columnName: "desc"},

        {colDisabled: false, colHidden: false, colSearch: true, colSort: false, columnComment: "备注", columnName: "ip"},
      ];

    },
    methods:{
        auditDialogClosed(){
            this.formInline={}
             this.showAuditDialog=false
        },
        increase(){
            this.showAuditDialog=true
        },
        confirmInfo(){
            this.auditDialogClosed()
            this.$message({
            type: 'success',
            message: '新增成功!'
          }); 
        },
      //加载表格
      setSearchHeight() {
        //搜索区域高度
        if (this.$refs.search !== undefined) {
          this.$nextTick(() => {
            let searchHeight = this.$refs.search.offsetHeight;
            this.setTableHeight(searchHeight);
          });
        }
      },
      addDelet(){
         this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      /**
       * 设置表格的高度
       */
      setTableHeight() {
        let clientHeiht = window.innerHeight || document.documentElement.clientHeight;
        this.tableHeight = clientHeiht - 280;
      },
      //查询
      search(val){
        if(val==true){
            this.showImportDialog = false;
         this.$refs.comTable.getTableData(this.pageNum,this.pageSize,this.searchForm);
        }
      },
      //重置
      clearData(){
        this.searchForm = {}
        this.search()
      }
    }
  }
</script>
<style scoped>
</style>
